---
title: Xác thực Tùy chỉnh
description: Kết nối với hệ thống lưng xác thực của riêng bạn
---

# Xác thực Tùy chỉnh

## Kết nối với hệ thống lưng xác thực của riêng bạn

Trong khi RainbowKit cung cấp [hỗ trợ hàng đầu cho Đăng nhập với Ethereum và NextAuth,](/docs/authentication#set-up-sign-in-with-ethereum-and-nextauth) bạn cũng có thể tích hợp với các back-end và định dạng tin nhắn tùy chỉnh.

### Tạo Bộ chuyển đổi tùy chỉnh

Đầu tiên tạo một bộ chuyển đổi xác thực. Điều này cho phép RainbowKit tạo/chuẩn bị tin nhắn và giao tiếp với hệ thống lưng của bạn.

Ví dụ, chúng ta có thể tạo một bộ chuyển đổi xác thực cho phép chúng ta sử dụng [Đăng nhập với Ethereum](https://login.xyz) trên một số điểm cuối API tùy chỉnh, như [iron-session](https://github.com/rainbow-me/rainbowkit/tree/main/examples/with-next-siwe-iron-session).

```tsx
import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit';
import { createSiweMessage } from 'viem/siwe';

const authenticationAdapter = createAuthenticationAdapter({
  getNonce: async () => {
    const response = await fetch('/api/nonce');
    return await response.text();
  },

  createMessage: ({ nonce, address, chainId }) => {
    return createSiweMessage({
      domain: window.location.host,
      address,
      statement: 'Sign in with Ethereum to the app.',
      uri: window.location.origin,
      version: '1',
      chainId,
      nonce,
    });
  },

  verify: async ({ message, signature }) => {
    const verifyRes = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, signature }),
    });

    return Boolean(verifyRes.ok);
  },

  signOut: async () => {
    await fetch('/api/logout');
  },
});
```

#### Cung cấp trạng thái xác thực

Giả sử ứng dụng của bạn đã quản lý vòng đời xác thực theo cách nào đó, bạn có thể truyền trạng thái xác thực hiện tại cùng với bộ chuyển đổi tùy chỉnh của bạn vào `RainbowKitAuthenticationProvider`, bao bọc `RainbowKitProvider` hiện tại của bạn.

```tsx
import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const authenticationAdapter = createAuthenticationAdapter({
  /* See above... */
});

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  // You'll need to resolve AUTHENTICATION_STATUS here
  // using your application's authentication system.
  // It needs to be either 'loading' (during initial load),
  // 'unauthenticated' or 'authenticated'.

  return (
    <WagmiProvider {...etc}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitAuthenticationProvider
          adapter={authenticationAdapter}
          status={AUTHENTICATION_STATUS}
        >
          <RainbowKitProvider {...etc}>
            <Component {...pageProps} />
          </RainbowKitProvider>
        </RainbowKitAuthenticationProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

Nếu bạn đã đi xa đến mức này và tạo bộ chuyển đổi cho thư viện xác thực mã nguồn mở hiện có, vui lòng cân nhắc tạo một gói cho những người khác sử dụng!
